<!DOCTYPE html>
<html lang="en" manifest="configCache.manifest ">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5缓存简单例子</title>

    <meta http-equiv="content-type" content="text/cache-manifest; charset=UTF-8">
    
    <!-- 配置缓存，后戳也可以是w3c推荐的 .appcache 格式 -->
    <link rel="stylesheet" href="static/style.css">
    <link rel="stylesheet" href="static/theme.css">
    <script src="static/main.js"></script>

</head>

<body>

    <img src="static/mailun.jpg" alt="">

    <script>
        //更新缓存
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
            window.applicationCache.update();
        }
        //检查一个新的缓存可以在页面加载
        window.addEventListener('load', function (e) {
            window.applicationCache.addEventListener('updateready', function (e) {
                if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                    //浏览器下载一个新的应用程序缓存。
                    //交换和重新加载该页面以获取新的魅力。
                    window.applicationCache.swapCache();
                    if (confirm('A new version of this site is available. Load it?')) {
                        window.location.reload();
                    }
                } else {
                    //明显没有改变。没有新的服务器。
                }
            }, false);
        }, false);

        /* 缓存相关事件 */

        var appCache = window.applicationCache;

        //资源已下载完成，并且已完成缓存最后的事件
        appCache.addEventListener('cached', handleCacheEvent, false);

        //检查更新。从第一个事件序列开始。
        appCache.addEventListener('checking', handleCacheEvent, false);

        //需要更新缓存，或者第一次下载资源时
        appCache.addEventListener('downloading', handleCacheEvent, false);

        //加载manifest文件时遇到401或404错误，将中断缓存网页。最后的事件
        appCache.addEventListener('error', handleCacheError, false);

        //文件未修改，不需要更新
        appCache.addEventListener('noupdate', handleCacheEvent, false);

        //加载manifest文件时遇到401或404错误，所以缓存将被删除。最后的事件
        appCache.addEventListener('obsolete', handleCacheEvent, false);

        //下载资源中
        appCache.addEventListener('progress', handleCacheEvent, false);

        //资源更新完毕，并且可以用swapCache()来启用新的缓存。最后的事件.
        appCache.addEventListener('updateready', handleCacheEvent, false);

        //回调函数
        function handleCacheEvent(e){
            console.log(e);
        }
        function handleCacheError(e) {   //这个方法是回调函数，里面随便写
            alert('Error: Cache failed to update!');
        };

    </script>
</body>

</html>